import React, { useEffect, useState } from 'react'

export default function UseEffect() {

    //声明状态
    let [count,setCount] = useState(0);
    let [num,setNum] = useState(100);

    //hook  useEffect
    // 1. 模拟 componentDidMount  和 componentDidUpdate
    useEffect(()=>{
        // console.log("useEffect 在函数式组件中模拟生命周期钩子,模拟 componentDidMount  和 componentDidUpdate");
    })

    // 2. useEffect 可以多次调用
    useEffect(()=>{
        // console.log("useEffect 可以多次调用");
    })

    // 3. 单独 模拟 componentDidMount
    useEffect(()=>{
        // console.log("单独 模拟 componentDidMount");
    },[]);  // []   此时，在监听哪个状态发生变化。
  
    useEffect(()=>{
        // console.log("单独 模拟 componentDidMount");
    },[count,num]);  // []   此时，在监听哪个状态发生变化。

    // 4. 模拟  componetWillUnmount
    useEffect(()=>{
        return ()=>{
            // console.log("模拟  componetWillUnmount");
        }
    })


    //创建方法
    let add = ()=>{
        setCount(++count);
    }

    //减方法
    let sub = ()=>{
        setNum(--num);
    }

    return (
        <>
            <h1>useEffect 在函数式组件中模拟生命周期钩子</h1>
            <hr />
            <h1>{count}</h1>
            <button onClick={add}>点击+1</button>

            <hr /><hr /><hr />
            <h1>{num}</h1>
            <button onClick={sub}>点击-1</button>
        </>
    )
}
